<template>
	<view class="tabbar_box">
		<up-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :value="activeTab"
			:activeColor="activeColor" inactiveColor="#000000">
			<up-tabbar-item v-for="(item,index) in list" :text="item.text" :key="index"
				@click="handleTabbarItemClick(index)">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="item.selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="item.iconPath"></image>
				</template>
			</up-tabbar-item>
		</up-tabbar>
		<view class="tabbar_bottom_box"></view>
	</view>
</template>

<script setup>
	import {
		useStore
	} from 'vuex'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		watchEffect,
		onBeforeMount,
	} from 'vue';
	const store = useStore()
	const inspectionTheme = computed(() => store.state.user.inspectionTheme)
	const activeColor = computed(() => {
		return getColorValue(inspectionTheme.value, '--primary-color');
	});

	const activeTab = computed(() => store.state.user.activeTab)
	const app = getApp();
	const imageUrl = computed(() => app.globalData.imageUrl)
	const list = reactive([{
			pagePath: "/pages/tabbar/index/index",
			text: "首页",
			iconPath: '/static/tabBar/home.png',
			selectedIconPath: '/static/tabBar/home-active.png'
		},
		{
			pagePath: "/pages/tabbar/order/index",
			text: "订单",
			iconPath: `/static/tabBar/order.png`,
			selectedIconPath: `/static/tabBar/order-active.png`
		},
		{
			pagePath: "/pages/tabbar/home/index",
			text: "我的",
			iconPath: `/static/tabBar/user.png`,
			selectedIconPath: `/static/tabBar/user-active.png`
		}
	])
	const getColorValue = (input, colorName) => {
		const regex = new RegExp(`${colorName}:([^;]+)`);
		const match = input.match(regex);
		return match ? match[1] : '#5F67EC';
	}
	const handleTabbarItemClick = (index) => {
		if (activeTab.value !== index) {
			store.dispatch('user/setActive', index);
			uni.switchTab({
				url: list[index].pagePath
			});
		}
	}
</script>

<style scoped lang="scss">
	.u-page__item__slot-icon {
		width: 54rpx;
		height: 54rpx;
	}
</style>